<template>
    <div class="semicircle row">
        <div class="col-1">
            <label1Vue :data="data1" :height="180"></label1Vue>
        </div>
        <div class="col">
            <label2Vue :data="data2" :height="180"></label2Vue>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { IDate } from '../interface';
import label1Vue from './datachar/label1.vue';
import label2Vue from './datachar/label2.vue';
const p = defineProps<{ char5: IDate[], char9: IDate[] }>()
const data1 = computed(() => {
    const count = p.char5.map(f => Number(f.count)).reduce((a = 0, b = 0) => a + b, 0)
    return p.char5.slice(0, 5).map(z => {
        return {
            ...z,
            day: z.day.slice(0,5),
            count: Math.floor(Number(z.count) / count * 10000) / 100
        }
    })
})

const data2 = computed(() => {
    return p.char9.slice(0, 5).map(z => {
        const count = p.char9.map(f => Number(f.count)).reduce((a = 0, b = 0) => a + b, 0)

        return {
            ...z,
            day: z.day.slice(0,5),
            count: Math.floor(Number(z.count) / count * 10000) / 100
        }
    }).sort((a, b) => a.count - b.count)
})

</script>

<style scoped>
.semicircle {
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    height: 205px;
    margin: 0 auto;
    --bs-gutter-x: 0;
}

.col-1 {
    width: 300px;
}

.col {
    width: 300px;
}
</style>